---
import fs from 'fs';
import path from 'path';

import prefabs from 'prefabs/index.js';

import Layout from 'layouts/Layout.astro';
import PreviewCardList from 'components/PreviewCardList.astro';
import ListingChips from 'components/ListingChips.astro';
import Image from 'components/Image.astro';

const pagePath = path.join(process.cwd(), '.content', 'pages', 'index.json');
const pageData = JSON.parse(fs.readFileSync(pagePath, 'utf8'));

const {
  featuredCollections,
  featuredSnippets,
  snippetListUrl,
  splashImage,
  pageDescription,
  structuredData,
} = pageData.props;
---

<Layout
  title=''
  description={pageDescription}
  canonical={'/'}
  structuredData={structuredData}
>
  <div class='snippet-list-header g-c1 a-center'>
    <div class='md:order-2 md:f-right my-2 mx-3.5 f-center'>
      <Image
        src={splashImage}
        alt=''
        height='240'
        width='240'
        fetchpriority='high'
        class='br-md'
      />
    </div>
    <div>
      <h2 class={prefabs.listingTitle}>
        Discover short code snippets for all your development needs.
      </h2>
      <p class='lh-loose mt-4 mx-3.5 mb-2 txt-100 fs-sm md:fs-md'>
        Browse snippets by collection or check out our top picks and latest
        articles below.
      </p>
    </div>
  </div>
  <ListingChips items={featuredCollections} />
  <div class='g-c3 mb-8'>
    <a
      href={snippetListUrl}
      class='inline-block lnk-no-animation relative mt-8'
    >
      <h2 class={prefabs.pageTitle}>New & Popular Snippets</h2>
    </a>
    <PreviewCardList contentItems={featuredSnippets} />
  </div>
</Layout>
